<template>
    <!-- 添加房屋 -->
        <div class="Addahouse">
            <!-- 添加房屋表头 -->
            <div class="AddCommunitytitle">
                <p @click="back">
                    <i class="el-icon-arrow-left"></i>
                    <span>房屋添加</span>
                </p>
                <p>
                    <span class="must">*</span>
                    <span>为必填项</span>
                </p>
            </div>
            <!-- 添加房屋表单验证模块 -->
            <div class="form">
                <div class="topbox">
                    <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="所属社区:" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="楼宇:" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择楼宇">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房间号:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="建筑面积:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="公摊面积:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="房屋朝向:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item label="活动时间" required>
                            <el-col :span="11">
                            <el-form-item prop="date1">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                            <el-form-item prop="date2">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                            </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="即时配送" prop="delivery">
                            <el-switch v-model="ruleForm.delivery"></el-switch>
                        </el-form-item>
                        <el-form-item label="活动性质" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                            <el-checkbox label="地推活动" name="type"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item> -->
                        <!-- <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="线上品牌商赞助"></el-radio>
                            <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="活动形式" prop="desc">
                            <el-input type="textarea" v-model="ruleForm.desc" maxlength="300"
                            show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item> -->
                    <!-- </el-form> -->
                    <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="所属社区:" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="楼宇:" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择楼宇">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房间号:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="建筑面积:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="公摊面积:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="房屋朝向:" prop="unrequir">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form> -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间" required>
                            <el-col :span="11">
                            <el-form-item prop="date1">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                            <el-form-item prop="date2">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                            </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="即时配送" prop="delivery">
                            <el-switch v-model="ruleForm.delivery"></el-switch>
                        </el-form-item>
                        <el-form-item label="活动性质" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                            <el-checkbox label="地推活动" name="type"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="线上品牌商赞助"></el-radio>
                            <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="活动形式" prop="desc">
                            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                        </el-form>
                </div>
                <div class="bottombox">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForms">
                         <el-form-item label="备注信息:" prop="desc">
                            <el-input type="textarea" placeholder="请输入备注信息" v-model="ruleForm.desc" maxlength="300"
                        show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 添加房屋保存按钮 -->
            <div class="contentfooter">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!-- <el-button type="primary" class="savebutton" @click="submitForm('ruleForm')"><i class="el-icon-document-checked"></i>保存</el-button>
                    <el-button plain class="reseatebutton" @click="resetForm('ruleForm')"><i class="el-icon-refresh-left"></i>重置</el-button> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
</template>

<script>
export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
        //   name: [
        //     { required: true, message: '请输入活动名称', trigger: 'blur' },
        //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //   ],
        //     region: [
        //     { required: true, message: '请选择活动区域', trigger: 'change' }
        //   ],
        //   unrequir:[
        //     {required: false, message: '请选择活动区域', trigger: 'change'}
        //   ]
        name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        submitForm(formName) {
            console.log(formName)
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
    .Addahouse{
        width: 1260px;
        margin: auto;
        // max-height: 500px;
        height: 150%;
        overflow:scroll;
        background-color: #fff;
        .AddCommunitytitle{
            width: 100%;
            height: 60px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
            font-weight: 900;
            font-style: normal;
            font-size: 16px;
            color: #666;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(2){
                font-size: 12px;
                font-weight: 400;
                color: #999;
                .must{
                    color: #FF3B30;
                    margin-right: 2px;
                }
            }
        }
        .form{
            padding: 40px 40px;
            .topbox{
                display: flex;
                justify-content: space-between;
            }
            .demo-ruleForms{
                ::v-deep .el-form-item{
                    display: flex;
                    .el-form-item__label{
                        width: 120px;
                        padding-right: 20px;
                        margin-right: 20px;
                    }
                    .el-textarea__inner{
                        width: 1020px;
                        height: 175px;
                        resize: none;
                    }
                    .el-form-item__content{
                        margin-left: 0% !important;
                    }
                }
            }
            .demo-ruleForm{
                width: 520px;
                ::v-deep .el-form-item{
                    display: flex;
                    align-items: center;
                    .el-form-item__label{
                        width: 120px;
                        padding-right: 20px;
                        margin-right: 20px;
                    }
                    .el-form-item__content{
                        margin-left: 0% !important;
                    }
                    .el-input__inner{
                        width: 400px;
                    }
                    .el-textarea__inner{
                        width: 1020px;
                        height: 175px;
                    }
                }
            }
        }
        .contentfooter{
            width: 100%;
            height: 100px;
            border-top: 1px solid rgba(242, 242, 242, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            .savebutton,.reseatebutton{
                width: 140px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .savebutton{
                margin-right: 40px;
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF !important;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>